@import '../../../common/style/mixin.less';
@import '../../../common/style/common.less';
.cc-panel {
  position: fixed;
  text-align: left;
  top: 88px;
  width: 395px;
  color: #ffffff;
  // background: #ffffff;
  .title {
    position: relative;
    &-selected {
      width: 135px;
      height: 40px;
      background-image: url('./images/title.png');
      background-repeat: no-repeat;
      font-size: 18px;
      padding-left: 10px;
      font-weight: bold;
      padding-top: 7px;
      transition: color ease-out 0.3s;
      &-hide {
        color: rgba(#ffffff, 0.6);
      }
    }

    &-options {
      position: absolute;
      top: 9px;
      left: 105px;
      width: 290px;
      padding-left: 17px;
      overflow: hidden;

      &-wrap {
        border-top: 1px solid rgba(#ffffff, 0.1);
        margin-right: 6px;
        transform: skewX(45deg);
        // background-image: url('./images/bg.png');
        background-image: url('./images/bg_2.png');
        overflow: hidden;
      }

      &-list {
        width: 2000px;
        list-style: none;
        padding-left: 0;
        margin: 0;
        transform: skewX(-45deg);
      }

      &-item {
        display: inline-block;
        // padding-right: 20px;
        padding-left: 10px;
        // padding-right: 2px;
        opacity: 0.8;
        line-height: 30px;
        height: 30px;
        width: 91px;

        &:after {
          content: '';
          display: inline-block;
          vertical-align: top;
          width: 25px;
          height: 30px;
          left: 30px;
          background-image: url('./images/divider.png');
          background-position-y: -3px;
        }
        cursor: pointer;

        &-title {
          display: inline-block;
          width: 56px;
          white-space: nowrap;
          // text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    &:after {
      display: block;
      content: '';
      clear: both;
    }
  }

  .body {
    // background-color: rgba(#15aced, 0.35);
    // background-color: rgba(5, 39, 54, 0.8);
    background-image: url('./images/bg.png');

    border: 1px solid rgba(#ffffff, 0.1);
    border-bottom: 0;
    color: #ffffff;
    &-bottom {
      position: relative;
      height: 24px;
      background-image: url('./images/bottom.png');
      background-repeat: no-repeat;

      &:after {
        position: absolute;
        right: -9px;
        top: 13px;
        content: '';
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-right: 10px solid #2fb0ff;
        transform: rotateZ(-135deg);
      }
    }
  }

  .with-animation {
    transition: margin linear 0.3s;
  }

  .proj-list {
    height: 220px;
    overflow-y: auto;
    .beautify-scrollbar();
    &-wrap {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    &-item {
      position: relative;
      padding-left: 24px;
      line-height: 54px;
      color: #ffffff;
      cursor: pointer;

      &::after {
        position: absolute;
        bottom: 0;
        left: 24px;
        display: block;
        height: 1px;
        width: 340px;
        background: #ffffff;
        opacity: 0.1;
        content: '';
      }
      &:hover {
        background: rgba(#ffffff, 0.1);
      }
    }
  }

  .ant-tabs > .ant-tabs-nav {
    display: none;
  }

  .ant-tabs-tabpane {
    color: #ffffff;
  }
}

.c-cypherpunk-panel {
}

.main-l-panel {
  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    font-size: 18px;
    font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 0.25px currentColor;
  }
  .ant-tabs-tab-btn {
    width: 60px;
    &:hover {
      color: #2fb0ff;
    }
  }
  .ant-tabs-top > .ant-tabs-nav::before,
  .ant-tabs-top > div > .ant-tabs-nav::before {
    display: none;
  }
  .ant-tabs-ink-bar {
    display: none;
  }
}
